<template>
	<view>
		<scroll-view class="scroll-h-h" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto2">
			<view v-for="(tab,index) in tabBars2" :key="tab.id" class="uni-tab-item items" :id="tab.id" :data-current="index"
			 @click="ontabtap2">
				<text class="uni-tab-item-title items2" :class="tabIndex2==index ? 'uni-tab-item-title-active3' : ''">{{tab.name}}</text>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	export default {
		props: ['tabBars'],
		data() {
			return {
				scrollInto2: "",
				tabIndex2: 0,
				tabBars2: this.tabBars,
			}
		},
		methods: {
			ontabtap2(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.tabIndex2 = index;
				this.scrollInto2 = this.tabBars2[index].id;
				this.$emit("scrollOne", this.scrollInto2)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-h-h {
		width: 750rpx;
		height: 80rpx;
		flex-direction: row;
		background-color: #fff;
		margin-bottom: 10rpx;
	
		.items {
			padding-top: 10rpx;
			box-sizing: border-box;
		}
	
		.items2 {
			padding: 0 10rpx 25rpx;
			box-sizing: border-box;
		}
	
		white-space: nowrap;
	}
	
	
	.uni-tab-item-title-active3 {
		color: $uni-color-zhuti;
		border-bottom: 1px solid $uni-color-zhuti;
	}
</style>
